<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/animate.min.css">
  <style type="text/css">
    .demo-enter,
    .demo-leave-to {
      opacity: 0;
    }

    .demo-enter-active,
    .demo-leave-active {
      transition: opacity 3s;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- mode 属性 指定元素的进入顺序  先出后进-->
    <transition name='demo' mode='out-in'>
      <!-- 因为vue 复用dom 所以需要加key  -->
      <!-- <div v-if="show" key='h1'>hello world</div>
      <div v-else key='h2'>hello hhhh</div> -->
      <!-- 动态组件 方法1 -->
      <!-- <children v-if="show"></children>
      <children-one v-else></children-one> -->
      <!-- 动态组件方法2 -->
      <component :is='type'></component>
    </transition>
    <button @click="handleCLick">切换</button>

  </div>

  <script type="text/javascript" src="js/vue.js"></script>
  <script>
    Vue.component('children', {
      template: '<div><p>children</p></div>'
    })
    Vue.component('children-one', {
      template: '<div>children-one</div>'
    })
    var vm = new Vue({
      el: '#app',
      data: {
        show: true,
        type: 'children'
      },
      methods: {
        handleCLick() {
          // this.show = !this.show
          this.type = this.type === 'children' ? 'children-one' : 'children'
        },

      }
    })
  </script>
</body>

</html>